<template>
  <div class="home-container">
    <!-- 顶部 -->
    <el-card class="box-card">
      <div class="title">
        数据统计
        <span><i class="iconfont icon-yanjing_xianshi_o"></i></span>
      </div>
      <div class="home-content">
        <div class="item">
          <p class="strong">¥33224</p>
          <p class="gray">本月收入 <span class="iconfont icon-wenhao"></span></p>
        </div>
        <div class="item">
          <p class="strong">¥60783.48</p>
          <p class="gray">本月支出</p>
        </div>
        <div class="item">
          <p class="strong">19</p>
          <p class="gray">本月新增学员</p>
        </div>
        <div class="item">
          <p class="strong">156</p>
          <p class="gray">本月授课</p>
        </div>
        <div class="item">
          <p class="strong">¥17652.78</p>
          <p class="gray">本月课消</p>
        </div>
        <div class="item">
          <p class="strong">4</p>
          <p class="gray">今日实到人次</p>
        </div>
        <div class="item">
          <p class="strong">0</p>
          <p class="gray">今日请假人次</p>
        </div>
        <div class="item">
          <p class="strong">0</p>
          <p class="gray">今日未到人次</p>
        </div>
      </div>
    </el-card>
    <!-- 中间middle -->
    <div class="middle box-card">
      <el-row :gutter="30">
        <el-col :span="16">
          <el-card class="m-left">
            <p class="title">快捷入口</p>
            <div class="home-content2">
              <div class="m-row">
                <el-row :gutter="30">
                  <el-col :span="8">
                    <div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/1.png" alt="" />
                      </div>
                      <div class="tt">学员档案</div>
                    </div>
                  </el-col>
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/2.png" alt="" />
                      </div>
                      <div class="tt">报名/续费</div>
                    </div></el-col
                  >
                  <el-col :span="8">
                    <div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/3.png" alt="" />
                      </div>
                      <div class="tt">我的课表</div>
                    </div></el-col
                  >
                </el-row>
              </div>
              <div class="m-row">
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/4.png" alt="" />
                      </div>
                      <div class="tt">学员管理</div>
                    </div></el-col
                  >
                  <el-col :span="8">
                    <div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/5.png" alt="" />
                      </div>
                      <div class="tt">快速扣课时</div>
                    </div></el-col
                  >
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/6.png" alt="" />
                      </div>
                      <div class="tt">批量扣课时</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="m-row">
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/7.png" alt="" />
                      </div>
                      <div class="tt">营销活动</div>
                    </div></el-col
                  >
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/8.png" alt="" />
                      </div>
                      <div class="tt">预警提醒</div>
                    </div></el-col
                  >
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/9.png" alt="" />
                      </div>
                      <div class="tt">上课记录</div>
                    </div></el-col
                  >
                </el-row>
              </div>
              <div class="m-row">
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/10.png" alt="" />
                      </div>
                      <div class="tt">班级管理</div>
                    </div></el-col
                  >
                  <el-col :span="8"
                    ><div class="flex2">
                      <div>
                        <img src="@/assets/images/kcc/11.png" alt="" />
                      </div>
                      <div class="tt">订单管理</div>
                    </div></el-col
                  >
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="m-t">
            <p class="title">代办事项</p>
            <div class="todos">
              <div class="todo">
                <span class="green border">续费</span>
                <span class="todo-tt">有57位学员需要通知续费</span>
              </div>
              <div class="todo">
                <span class="green border">欠费</span>
                <span class="todo-tt">有3条欠费待补交记录</span>
              </div>
              <div class="todo">
                <span class="blue border">排课</span>
                <span class="todo-tt">有33个班级未排课</span>
              </div>
              <div class="todo">
                <span class="blue border">点名</span>
                <span class="todo-tt">本周有41个课次超时未点名</span>
              </div>
              <div class="todo">
                <span class="blue border">缺课</span>
                <span class="todo-tt">有22条缺课记录待安排</span>
              </div>
            </div>
          </el-card>
          <div class="m-b">
            <el-card>
              <span style="marginright: 10px">生日学员</span>
              <el-select
                v-model="value"
                placeholder="今日生日"
                style="width: 160px; marginright: 100px"
              >
                <el-option
                  v-for="item in options"
                  :value="item.value"
                  :label="item.label"
                  :key="item.value"
                >
                </el-option>
              </el-select>
              <span class="b-more">更多</span>
            </el-card>
            <el-card></el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- echart -->
    <div class="echart-container">
      <el-row :gutter="30">
        <el-col :span="16">
          <div class="InA-container">
            <div class="top">
              <div class="header">
                <span class="title">新增学员</span>
                <el-select
                  placeholder="近30天"
                  v-model="value2"
                >
                  <el-option
                    v-for="item in options2"
                    :label="item.label"
                    :value="item.value2"
                    :key="item.value2"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div :body-style="{ paddingTop: '10px' }">
              <div class="container" ref="target"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="InA-container">
            <div class="top">
              <div class="header">
                <span class="title">学员类型</span>
              </div>
            </div>
            <div :body-style="{ paddingTop: '10px' }">
              <div class="container" ref="target2"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "echarts";
//学员生日数据源
const value = ref("");
const options = ref([
  { value: "今日生日", label: "今日生日" },
  { value: "7天内生日", label: "7天内生日" },
  { value: "15天内生日", label: "15天内生日" },
  { value: "30天内生日", label: "30天内生日" },
  { value: "60天内生日", label: "60天内生日" },
]);

//echart 柱状图
const value2 = ref("");
const options2 = ref([
  { value2: "近一周", label: "近一周" },
  { value2: "近15天", label: "近15天" },
  { value2: "近30天", label: "近30天" },
  { value2: "自定义", label: "自定义" },
]);

let mChart;
const target = ref(null);

onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {  
	const options= {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        shadowStyle: {
          // 阴影指示器样式设置
          width: "auto", // 阴影大小
          color: "rgba(150,150,150,0.3)", // 阴影颜色
        },
        textStyle: {
          color: "#fff",
        },
      },
    },
    // X 轴配置
    xAxis: {
      data: [
        "02-28",
        "03-02",
        "03-04",
        "03-06",
        "03-08",
        "03-10",
        "03-12",
        "03-14",
        "03-16",
        "03-18",
        "03-20",
        "03-22",
        "03-24",
        "03-26",
        "03-28",
      ],
    },
    yAxis: {
      value: "",
    },
    series: [
      {
        name: "新增学员",
        type: "bar",
        barWidth: 6,
        // 图表的数据
        data: [2, 0, 0, 1, 0, 2, 0, 2, 1, 2, 1, 0, 1, 2, 2, 0, 0, 1, 2, 2],
        itemStyle: {
          color: "#89c3eb",
        },
      },
    ],
  };
  mChart.setOption(options);
};

//echart 饼图
let mChart2;
const target2 = ref(null);

onMounted(() => {
  mChart2 = echarts.init(target2.value);
  renderChart2();
});

const renderChart2 = () => {
  const options = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: ["潜在学员","在读学员","历史学员"],
      orient: "vertical", //设置图例为竖直
      x: "left",
      y: "top",
      padding: [15,0,0,15],
    },
    series: [
      {
        type: "pie",
        name: "学员类型",
        radius: "55%",
        data: [
          {
            value: 35,
            name: "潜在学员",
          },
		  {
            value: 87,
            name: "在读学员",
          },
		  {
            value: 50,
            name: "历史学员",
          },
        ],
        color: ["#88cb7f","#2ca9e1","#909399"],
      },
    ],
  };
  mChart2.setOption(options);
};
</script>

<style lang="scss" scoped>
.home-container {
  margin: 10px;
  .title {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .home-content {
    display: flex;
    flex: 1;
    .item {
      margin-right: 15px;
      padding-left: 25px;
      padding-right: 30px;
      text-align: center;
      line-height: 26px;
      border-right: 1px solid #dcdfe6;
      .strong {
        font-size: 24px;
      }
      .gray {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.box-card {
  margin: 10px 10px 0px;
  border: 0px;
}

.home-content2 {
  .m-row {
    margin-bottom: 30px;
    .flex2 {
      display: flex;
      padding-left: 20px;
      padding-right: 20px;
      .tt {
        margin-left: 10px;
        line-height: 40px;
        height: 40px;
      }
    }
    .flex2:hover {
      background-color: rgba(236, 245, 255, 0.8);
      border: 1px solid #20a2ffb9;
      cursor: pointer;
    }
  }
}

.m-t {
  margin-bottom: 10px;
  .todos {
    .todo {
      font-size: 14px;
      line-height: 30px;
      color: #606266;
      .green {
        border: 1px solid #00c6c4;
        color: #00c6c4;
      }
      .blue {
        border: 1px solid#20a1ff;
        color: #20a1ff;
      }
      .border {
        border-radius: 4px;
        font-size: 12px;
        padding: 0 5px;
        line-height: 17px;
      }
      .todo-tt {
        font-size: 14px;
        color: #666;
        font-weight: 300;
        line-height: 1;
        margin-left: 10px;
      }
    }
  }
}

.b-more {
  color: #20a1ff;
  font-size: 12px;
}

.InA-container {
  width: 100%;
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  .top {
    border-bottom: 1px solid #e6ebf5;
    width: 100%;
    padding: 18px 20px;
    box-sizing: border-box;
    .header {
      .title {
        font-size: 14px;
        margin-right: 10px;
      }
      .el-select {
        width: 100px;
      }
    }
  }
  .container {
    border-top: 1px solid #e6ebf5;
    height: 300px;
  }
}

.echart-container {
  margin: 10px;
}
</style>
